import React, { Component } from 'react'
import { Spin, message } from 'antd'
import { get, post } from '@/utils/requestUtil.js'
import Avatar from '@/components/viewWidget/Avatar'
import { Link } from 'react-router-dom'
import moment from 'moment'
import _ from 'lodash'
import Button from '@/components/basicWidget/Button'
import { BookFilled, PhoneFilled, MailFilled } from '@ant-design/icons'
import './index.css'
import ImageWidget from '../ImageWidget'

class CustomerCard extends Component {

    constructor(props) {
        super(props)
        this.state = {
            customer: { id: null },
            loading: true,
            custOtherData: null,
            custStatus: null,
            badgeList: [] //客户徽章信息
        }
    }

    async componentDidMount() {
        const { customerId } = this.props
        let customer = _.cloneDeep(this.props.customer)

        //获取客户基本信息
        if (customer) {
            await new Promise(resolve => { this.setState({ customer }, resolve) })
        } else if (!customer && customerId) {
            const response = await get(`/customer/get/${customerId}`)
            if (response && response.data) customer = response.data
        }

        //获取客户其他信息
        let custOtherData = null
        if (customer) {
            const response = await get(`/customer/get/other/${customer.id}`)
            if (response && response.data) {
                custOtherData = response.data
                //计算客户加入的天数
                let joinDays = 0
                const nowDate = new Date()
                const joinDate = moment(custOtherData.createDate)._d
                if (joinDate > nowDate) joinDays = 0
                else {
                    joinDays = (nowDate - joinDate) / (1 * 24 * 60 * 60 * 1000)
                }
                custOtherData.joinDays = Math.floor(joinDays)
            }
        }

        //查询当前登录用户对此客户的状态
        let custStatus = null
        if (customer && this.props.user) {
            const response = await get(`/customer/${customer.id}/status/${this.props.user.id}`)
            if (response && response.data) custStatus = response.data
        }

        let badgeList = []
        //获取客户徽章信息
        if (customer) {
            const response = await get(`/api/badge/customer/get/${customer.id}`)
            if (response && response.data) badgeList = response.data
        }

        await new Promise(resolve => {
            this.setState({
                customer,
                customerId,
                custOtherData,
                custStatus,
                badgeList
            }, resolve)
        })

        if (customer && this.props.user && custOtherData && custStatus) {
            await new Promise(resolve => { this.setState({ loading: false }, resolve) })
        }
    }

    //关注操作
    onAttentionHandler = async () => {
        const { customer } = this.state
        const { user } = this.props
        if (customer.id === user.id) {
            message.warning('您不能关注自己')
            return
        }
        await post(`/customer/${customer.id}/follow/${this.props.user.id}`)
        await this.flushCustomerAndStatus()
    }

    //私信操作
    onSendMessageHandler = async () => {
        message.warning('暂不支持私信操作')
    }

    flushCustomerAndStatus = async () => {
        let customer = null
        let custStatus = null
        const response = await get(`/customer/get/${this.state.customer.id}`)
        if (response && response.data) customer = response.data
        const statusResponse = await get(`/customer/${this.state.customer.id}/status/${this.props.user.id}`)
        if (statusResponse && statusResponse.data) custStatus = statusResponse.data
        await new Promise(resolve => {
            this.setState({
                customer,
                custStatus
            }, resolve)
        })
    }

    render() {
        if (this.state.loading === true) return <Spin />
        return (
            <div className='customerCard-main'
                style={this.props.style}
            >
                <div className='customerCard-host-name'>
                    <Avatar
                        src={this.state.customer.avatarUrl}
                        alt='avatar'
                        isCircle={true}
                        style={{ width: '70px', height: '70px', marginRight: '1em' }}
                    ></Avatar>
                    <div className='customerCard-nickname-addDays'>
                        <Link to={`/user/${this.state.customer.id}`} style={{ display: 'block' }}>{this.state.customer.nickname}</Link>
                        <span style={{ display: 'block' }}>加入 {this.state.custOtherData.joinDays} 天</span>
                    </div>
                </div>

                <div className='customerCard-data-basicInfo'>
                    <div><span><BookFilled />个性签名:&nbsp;&nbsp;&nbsp;</span>{this.state.customer.personalizedSignature}</div>
                    <div><span><PhoneFilled />联系电话:&nbsp;&nbsp;&nbsp;</span>{this.state.customer.phone ? this.state.customer.phone : '保密'}</div>
                    <div><span><MailFilled />电子邮箱:&nbsp;&nbsp;&nbsp;</span>{this.state.customer.email ? this.state.customer.email : '保密'}</div>
                </div>

                <div className='customerCard-data-statistics'>
                    <div className='customerCard-data-statistics-item'>
                        <span>{this.state.custOtherData.blogNumber}</span>
                        <span style={{ color: 'var(--font-ten)' }}>博客</span>
                    </div>
                    <div className='customerCard-data-statistics-item'>
                        <span>{this.state.customer.fans}</span>
                        <span style={{ color: 'var(--font-ten)' }}>粉丝</span>

                    </div>
                    <div className='customerCard-data-statistics-item'>
                        <span>{this.state.customer.concern}</span>
                        <span style={{ color: 'var(--font-ten)' }}>关注</span>

                    </div>
                    <div className='customerCard-data-statistics-item'>
                        <span>{this.state.custOtherData.commentNumber}</span>
                        <span style={{ color: 'var(--font-ten)' }}>评论</span>

                    </div>
                    <div className='customerCard-data-statistics-item'>
                        <span>{this.state.custOtherData.collectionNumber}</span>
                        <span style={{ color: 'var(--font-ten)' }}>收藏</span>
                    </div>
                </div>
                {
                    this.state.badgeList.length > 0 ?
                        <div className='customerCard-badge'>
                            {
                                this.state.badgeList.map(item => {
                                    return (
                                        <div className='customerCard-badge-item' key={item.id} data-tooltip-bottom={item.badgeName}>
                                            <ImageWidget src={item.badgePath} alt={item.badgeName}></ImageWidget>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        : ''
                }
                <div className='customerCard-button'>
                    <Button style={this.state.custStatus.followStatus === 'true' ? { marginRight: '1em', color: 'var(--font-ten)' } : { marginRight: '1em' }}
                        onClick={this.onAttentionHandler}
                    >{this.state.custStatus.followStatus === 'true' ? '已关注' : '关注'}</Button>
                    <Button
                        onClick={this.onSendMessageHandler}
                    >私信</Button>
                </div>
            </div>
        )
    }
}

export default CustomerCard
